<template>
  <div class="footer">
    <div class="foot-1">
      <div class="protection" v-for="(item, index) in protectList" :key="index">
        <img :src="require(`@/assets/img/public/protect${index+1}.png`)" />
        {{ item }}
      </div>
    </div>
    <div class="foot-2">
      <div class="phone">
        <dl class="phone-list">
          <dt>商城客服热线</dt>
          <dd>
            <img src="../assets/img/public/phone1.png" />
            商城服务时间: 09:00 - 18:00
          </dd>
          <dd>
            <img src="../assets/img/public/phone2.png" />
             400-8899-618
          </dd>
        </dl>
      </div>
      <div class="phone">
        <dl class="phone-list">
          <dt>企业购热线</dt>
          <dd>
            <img src="../assets/img/public/phone1.png" />
            商城服务时间: 09:00 - 18:00
          </dd>
          <dd>
            <img src="../assets/img/public/phone2.png" />
             0755-83286903
          </dd>
        </dl>
      </div>
      <div class="phone">
        <dl class="phone-list">
          <dt>售后服务热线</dt>
          <dd>
            <img src="../assets/img/public/phone1.png" />
            售后热线时间: 09:00 - 20:00
          </dd>
          <dd>
            <img src="../assets/img/public/phone2.png" />
             400-6788-688
          </dd>
        </dl>
        </div>
      <div class="phone">
        <dl class="phone-list">
          <dt>在线服务咨询</dt>
          <dd>
            <img src="../assets/img/public/phone1.png" />
            服务时间: 09:00 - 20:00
          </dd>
          <dd>
            <img src="../assets/img/public/phone2.png" />
            在线客服 即时答疑
          </dd>
        </dl>
      </div>
    </div>
    <div class="foot-3">
      <div class="foot-content1">
        <dl class="foot-list">
          <dd>新手指引</dd>
          <dd>交易须知</dd>
          <dd>开具发票</dd>
          <dd>联系客服</dd>
          <dd>会员登录小贴士</dd>
        </dl>
        <dl class="foot-list">
          <dd>支付及配送</dd>
          <dd>在线支付</dd>
          <dd>运费政策</dd>
          <dd>配送方式</dd>
        </dl>
        <dl class="foot-list">
          <dd>订单及售后</dd>
          <dd>订单说明</dd>
          <dd>退款说明</dd>
          <dd>售后政策</dd>
          <dd>售后申请</dd>
        </dl>
        <dl class="foot-list">
          <dd>关于顺电</dd>
          <dd>品牌故事</dd>
          <dd>投资者故事</dd>
          <dd>联系方式</dd>
          <dd>网站合作</dd>
          <dd>仓库招租</dd>
        </dl>
      </div>
      <div class="foot-content2">
        <p>门店体验店</p>
        <p>
        深圳市顺电连锁股份有限公司，是一家专门销售家用电器(包括手机、电脑、数码相机)的零售商。顺电每一家门店有以下特点:高品质商品、丰富选择、专业服务。
        </p>
        <div id="footAddress">
          <a href="javascript:void(0)" v-for="(item) in footAddressList" :key="item">{{item}}</a>
        </div>
      </div>
    </div>
    <div class="foot-4">
      <dl id="footlicense1">
        <dt>
        <span>粤ICP备13052236号</span>
        </dt>
        <dd>营业执照</dd>
        <dd>增值电信营业许可证</dd>
      </dl>
      <p id="footlicense2">Copyright 2002-2025. 深圳市顺电连锁股份有限公司 版权所有</p>
      <dl id="footlicense3">
        <dd>
          <span>
            <img src="../assets/img/public/license1.png" />
            网上报警
          </span>
        </dd>
        <dd>
          <span>
            <img src="../assets/img/public/license2.png" />
            深圳市公安局
          </span>
        </dd>
        <dd>
          <span>
            <img src="../assets/img/public/license3.png" />
            工商网监
          </span>
        </dd>
        <dd>
          <span>
            <img src="../assets/img/public/license4.png" />
            关注微博
          </span>
        </dd>
        <dd>
          <span>
            <img src="../assets/img/public/license5.png" />
            顺电购物
          </span>
        </dd>
      </dl>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      protectList: ["正品保证", "会员尊享", "全国联保", "30天退货", "正规发票"],
      footAddressList: ["北京",  "广州", "上海", "苏州", "深圳", "更多"]
    }
  }
}
</script>

<style scoped>
  .footer {
    width: 100%;
    margin: 0;
    padding: 0;
    background: rgb(255,255,255);
  }
  .foot-1 {
    display: flex;
    width: 100%;
    background: #f0f0f0;
    color: #6a6a6a;
    font-size: 16px;
    height: 100px;
    line-height: 100px;
    text-align: center;
    justify-content: center;
  }
  .protection {
    width: 16.6667%;
    line-height: 100px;
    color: #6a6a6a;
    font-size: 16px;
    height: 100px;
    line-height: 100px;
    text-align: center;
  }
  .protection > img {
    margin-right: 10px;
    vertical-align: middle;
  }
  .foot-2 {
    width: 1200px;
    margin: 0 auto;
    display: flex;
  }
  .foot-2>.phone {
    width: 25%;
    margin: 0;
    padding: 0;
  }
  .foot-2>.phone > .phone-list {
    margin: 0;
    margin-left: 20px ;
  }
  .foot-2>.phone > .phone-list > dt {
    margin: 0;
    color: #313131;
    font-size: 14px;
    font-weight: 600;
    margin: 30px 0 25px;
    text-align: start;
  }
  .foot-2>.phone > .phone-list > dd {
    margin: 0;
    margin-bottom: 10px;
    font-size: 14px;
    font-weight: 400;
    color: #000;
    text-align: start;
  }
  .foot-3 {
    display: flex;
    justify-content: center;
    width: 1200px;
    margin: 20px auto;
    border-bottom: 1px solid #e1e1e1;
    border-top: 1px solid #e1e1e1;
  }
  .foot-3 > .foot-content1 {
    width: 66.66667%;
    float: left;
  }
  .foot-3 > .foot-content1 > .foot-list {
    margin: 0;
    float: left;
    margin: 20px 20px 0;
    width: 20%;
  }
  .foot-3 > .foot-content1 > .foot-list > dd {
    color: #707070;
    font-size: 12px;
    margin: 20px 0;
    cursor: pointer;
    text-align: start;
  }
  .foot-3 > .foot-content1 > .foot-list > dd:first-of-type {
    margin: 0;
    color: #313131 !important;
    font-size: 14px;
    font-weight: 600;
    margin: 30px 0 25px;
  }
  .foot-3 > .foot-content1 > .foot-list > dd:hover {
    color: #0099a8;
  }
  .foot-3 > .foot-content2 {
    margin: 0;
    height: 280px;
    width: 350px;
    background: url("@/assets/img/public/china.png") 100% 100% no-repeat !important;
  }
  .foot-3 > .foot-content2 > p:first-of-type {
    font-size: 14px;
    font-weight: 600;
    line-height: 30px;
    margin-top: 20px;
    color: #313131;
    text-align: start;
  }
  .foot-3 > .foot-content2 > p:last-of-type {
    font-size: 14px;
    color: #313131;
    margin-top: 10px;
    text-align: left;
  }
  #footAddress {
    width: 60%;
  }
  #footAddress > a {
    font-size: 14px;
    color: #707070;
    margin: 5px 0;
    width: 50%;
    float: left;
    text-align: start;
  }
  .foot-4 {
    margin: 0 auto;
    height: 150px;
    text-align: center;
  }
  #footlicense1 {
    color: #707070;
    display: flex;
    justify-content: center;
  }
  #footlicense1 > dt {
    color: #00bad6;
  }
  #footlicense1 > dd {
    margin: 0;
    color: #707070;
    padding-left: 10px;
    width: auto;
    text-align: center;
  }
  #footlicense2 {
    margin: 0;
    color: #707070;
    margin: 10px 0;
  }
  #footlicense3 {
    display: flex;
    justify-content: center;
    color: #707070;
    height: 100px;
    vertical-align: middle;
  }
  #footlicense3 > dd {
    cursor: pointer;
    height: 40px;
    padding: 0 10px;
    color: #707070;
    margin: 0;
    width: auto;
  }
  #footlicense3 > dd  img {
    margin-left: 10px;
    vertical-align: middle;
  }
</style>